import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../src/page/Home/Home';
import Product from '../src/page/Product/Product';
import ShoppingCart from '../src/page/ShoppingCart/ShoppingCart';
import Mine from '../src/page/Mine/Mine';
import Ionicons from 'react-native-vector-icons/Ionicons';
const Tab = createBottomTabNavigator();
export default function TabBar() {
    return (
        <Tab.Navigator
            screenOptions={({route})=>({
                tabBarIcon:({focused,color,size})=>{
                    let iconName
                    if(route.name=="Home"){
                        iconName =focused ?  "home": "home-outline";
                    }else if (route.name=="Product"){
                        iconName=focused ?  "videocam":"videocam-outline" ;
                    }else if (route.name=="食材区"){
                        iconName=focused ?  "bag":"bag-handle-outline" ;
                    }else if (route.name=="Mine"){
                        iconName=focused ? "person" :"person-outline" ;
                    }
                    return <Ionicons name={iconName} size={size} color={color}/>
                }
            })}
            tabBarOptions={{
                activeTintColor: 'green',
            }}
        >
            <Tab.Screen name="Home" component={Home} />
            <Tab.Screen name="Product" component={Product} />
            <Tab.Screen name="食材区" component={ShoppingCart} />
            <Tab.Screen name="Mine" component={Mine} />
        </Tab.Navigator>
    );
  }